<template>
    <div class="boy" >
        <div class="kabao" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="3">
            <ul>
                <li class="mar_top show" v-for="item in cardList" :key="item.id" @click="clear_show(item.id)"><!--@click="clear(item.id)"-->
                    <img v-if="item.bankName=='中信银行'||item.bankName=='中国光大银行'||item.bankName=='中国农业银行'||item.bankName=='中国工商银行'||item.bankName=='中国建设银行'||item.bankName=='中国民生银行'||item.bankName=='中国邮政储蓄银行'||item.bankName=='中国银行'||item.bankName=='交通银行'||item.bankName=='兴业银行'||item.bankName=='北京银行'||item.bankName=='华夏银行'||item.bankName=='平安银行'||item.bankName=='广东发展银行'||item.bankName=='招商银行'" :src="bgUgr[item.bankName]">
                    <img v-else src="../../../assets/bank/yhBUG/tongyong.png">
                    <h1>{{item.bankName |capitalize6}}</h1>
                    <h1>储蓄卡</h1> 
                    <h1>手机尾号{{item.bankUserPhone |capitalize4}}</h1>
                    <h1><span>**** **** ****</span>{{item.bankId |capitalize4}}</h1>                
                </li>
            </ul>
           <loadingtmp :busy="busy" :datalength="cardList.length" :loadall="loadall"></loadingtmp>
        </div> 
        <div class="btn" style="color:#fff;" @click="href">
                + 添加银行卡
            </div>
        <div class="show_zz" v-show="cle">
            <ul>
                <li @click="clear">删除</li>
                <li @click="clear_show">返回</li>
            </ul>
        </div>
    </div>
</template>
<style scoped>
@import "../../../assets/personal/css/Card_package.css";
</style>
<script>
import loadingtmp from '@/components/load/loading'
export default {
    data () {
        return {
            cardList:[],
            bgUgr:{
                "中国农业银行":require('../../../assets/bank/yhBUG/中国农业银行.png'),
                "北京银行":require('../../../assets/bank/yhBUG/北京银行.png'),
                "中国银行":require('../../../assets/bank/yhBUG/中国银行.png'),
                "中国建设银行":require('../../../assets/bank/yhBUG/中国建设银行.png'),
                "中国光大银行":require('../../../assets/bank/yhBUG/中国光大银行.png'),
                "兴业银行":require('../../../assets/bank/yhBUG/兴业银行.png'),
                "中信银行":require('../../../assets/bank/yhBUG/中信银行.png'),
                "中国民生银行":require('../../../assets/bank/yhBUG/中国民生银行.png'),
                "招商银行":require('../../../assets/bank/yhBUG/招商银行.png'),
                "交通银行":require('../../../assets/bank/yhBUG/交通银行.png'),
                "广东发展银行":require('../../../assets/bank/yhBUG/广东发展银行.png'),
                "华夏银行":require('../../../assets/bank/yhBUG/华夏银行.png'),
                "中国工商银行":require('../../../assets/bank/yhBUG/中国工商银行.png'),
                "中国邮政储蓄银行":require('../../../assets/bank/yhBUG/中国邮政储蓄银行.png'),
                "平安银行":require('../../../assets/bank/yhBUG/平安银行.png'),
            },
            cle:false,
            clearId:'',
            page: 1,
            pageSize: 4,
            busy: false,
            loadall: false,
        }
    },
    components:{
      loadingtmp
    },
    mounted(){
    
    },
    methods:{
      CardBag(flag){//获取银行卡接口
          this.$http.get(this.APIURL_PREFIX+"/api/wap/bankCardBag/page",{ params: { page: this.page, rows: this.pageSize}}).then((response) => {
            if (flag) {
              this.cardList =this.cardList.concat(response.data.data);
            } else {
              this.cardList= response.data.data;
            }
            if (0 == response.data.data.length || response.data.data.length < this.pageSize) {
                this.busy = true;
                this.loadall = true;
            }
            else {
                this.busy = false;
                this.page++
            }
          }).catch(function (err) {
            console.log(err)
          });
      },
     loadMore() {
        this.busy = true;
        setTimeout(() => {
            this.CardBag(this.page > 1);
        }, 500);
     },
      href:function(){//点击跳转添加银行卡
         this.$router.push({ name:'add_bank_card'})
      },
      clear:function(){
        let vm=this;
        layer.confirm('确定删除该银行卡吗？', {
            btn : [ '确定', '取消' ]//按钮
        }, 
        function() {
           vm.$http.delete(vm.APIURL_PREFIX+"/api/wap/bankCardBag/"+vm.clearId).then((response) => {
                layer.msg("删除成功")
                vm.page=1;
                vm.cle=!vm.cle
                vm.cardList=[]
                vm.CardBag();
           }).catch(function (err) {
                console.log(err)
           });  
        });    
      },
      clear_show:function(id){
          this.clearId=id
          this.cle=!this.cle
      }
    }
}
</script>
